<template>
  <div class="wik-people">
    <div class="wik-people-search">
      <el-input :prefix-icon="Search" v-model="searchName"></el-input>
    </div>
    <div class="wik-people-list">
      <div class="wik-people-list-item" v-for="item in listUI" :key="item.id" @click="changeHandler(item.id)">
        <span>{{ item.nameClone || item.name }}</span>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed } from "vue";
import { Search } from "@element-plus/icons-vue";
type List = {
  id: string;
  name: string;
  [key: string]: any;
};
const emits = defineEmits(["close"]);
const searchName = ref("");
const listUI = computed(() => {
  return props.list.filter((item: List) => {
    return ((item.nameClone || item.name) ?? "").toUpperCase().indexOf(searchName.value.toUpperCase()) > -1;
  });
});
const props = defineProps({
  list: {
    type: Array<List>,
    default: () => []
  },
  handleDateChange: {
    type: Function,
    default: () => {}
  }
});
const id = defineModel("id", {
  type: String,
  default: ""
});
const changeHandler = (val: any) => {
  id.value = val;
  props.handleDateChange(val);
  emits("close");
};
</script>
<style lang="scss">
.wik-people {
  width: 270px;
  background: #fff;
  background: #ffffff;
  border-radius: 0.25rem;
  box-shadow: 0 0 16px #00000014;
  padding: 8px 0;
  &-search {
    padding: 8px 16px;
  }
  &-list {
    max-height: 220px;
    overflow-y: auto;
  }
  &-list-item {
    padding: 8px 16px;
    cursor: pointer;
    &:hover {
      background: #f5f5f5;
    }
    span {
      display: block;
      line-height: 28px;
      text-align: left;
      font-size: 14px;
      color: #333333;
    }
  }
}
</style>
